<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.fl {
				float: left !important;
			}
			
			.fr {
				float: right !important;
			}
			.lunbo{
				background-image: url(img/下载.jpg);
				background-position: center;
			}
			.nav {
				width: 976px;
				height: 380px;
				margin: 0 auto;
				position: relative;
				border: solid 12px rgba(255,255,255,0.8);
				border-bottom: 0px;
			}
			
			.nav:hover .flr {
				display: block;
			}
			
			.nav .flr {
				position: absolute;
				top: 140px;
				display: none;
				width: 976px;
			}
			
			.nav .flr div {
				width: 30px;
				height: 60px;
				background-color: rgba(102, 102, 102, 0.5);
				color: white;
				text-align: center;
				font-size: 30px;
				line-height: 60px;
				font-family: "黑体";
				font-weight: bold;
				cursor: pointer;
			}
			
			li {
				list-style-type: none;
			}
			
			.nav_items {
				height: 340px;
			}
			
			.nav_items li {
				position: absolute;
				width: 976px;
			}
			
			.trigger {
				clear: both;
				overflow: hidden;
				text-align: center;
				margin: 0 auto;
			}
			
			.trigger li {
				display: inline-block;
				line-height: 40px;
				padding: 0px 20px;
				min-width: 100px;
				text-align: center;
				cursor: pointer;
			}
			
			.trigger li.active {
				border-bottom: 3px solid #e6057d;
			}
		</style>

	</head>

	<body>
<div class="lunbo">
	

		<div class="nav">
			<ul id="J-nav_items" class="nav_items">
				<li style="opacity: 1;">
					<a href="#">
						<img width="100%" src="img/11.jpg" alt="" />
					</a>
				</li>
				<li style="opacity: 0;">
					<a href="#">
						<img width="100%" src="img/15141932916195.jpg" alt="" />
					</a>
				</li>
				<li style="opacity: 0;">
					<a href="#">
						<img width="100%" src="img/15141973263105.jpg" alt="" />
					</a>
				</li>
				<li style="opacity: 0;">
					<a href="#">
						<img width="100%" src="img/15141994560530.jpg" alt="" />
					</a>
				</li>
			</ul>
			<div class="flr">
				<div id="J-fl" class="fl">&lt;</div>
				<div id="J-fr" class="fr">&gt;</div>
			</div>
			<ul id="J-trigger" class="trigger">
				<li class="active">链接一</li>
				<li>链接二</li>
				<li>链接三</li>
				<li>链接四</li>
			</ul>
		</div>
</div>
		<script type="text/javascript">
			window.onload = function() {
				var lis = document.getElementById("J-trigger").getElementsByTagName("li");
				var navli = document.getElementById("J-nav_items");
				var index = 0;
				document.getElementById("J-fl").onclick = function() {
					index--;
					if(index < 0) {
						index = lis.length - 1;
					}
					MenuActiveByIndex();
				};
				document.getElementById("J-fr").onclick = function() {
					index++;
					if(index > lis.length) {
						index = 0;
					}
					MenuActiveByIndex();
				};
				for(var i = 0; i < lis.length; i++) {
					lis[i].setAttribute("data-index", i);
					lis[i].onmouseover = function() {
						index = this.getAttribute("data-index");
						MenuActiveByIndex();
					};
				}

				function MenuActiveByIndex() {
					for(var k = 0; k < lis.length; k++) {
						lis[k].removeAttribute("class");
					}
					lis[index].className = "active";
					for(var n = 0; n < navli.children.length; n++) {
						navli.children[n].style.opacity = 0;
					}
					navli.children[index].style.opacity = 1;
				}

				setInterval(function() {
					index++;
					if(index == lis.length) {
						index = 0;
					}
					MenuActiveByIndex(index);
				}, 5000);
			};
		</script>
	</body>

</html>
